<template>
  <div>
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a @click="close" class="back-title">
            <Icon type="ios-arrow-back" />返回
          </a>
          <div class="head-name">添加</div>
          <span></span>
          <a @click="close" class="window-close">
            <Icon type="ios-close" size="31" class="ivu-icon-ios-close" />
          </a>
        </div>
      </div>
      <div style="width: 100%; padding: 0 50px 0 50px">
        <Form ref="form" :model="form" :rules="formValidate" :label-width="100" label-position="left">
              <FormItem label="标题" prop="title" >
                <Input v-model="form.title" clearable/>
              </FormItem>
              <FormItem label="封面" prop="cover" class="form-noheight">
                <upload-pic-input v-model="form.cover"></upload-pic-input>
              </FormItem>
              <FormItem label="内容" prop="content" >
                <editor id="editor-2-0" v-model="form.content"></editor>
              </FormItem>
              <FormItem label="排序" prop="dsort" >
                <InputNumber v-model="form.dsort" style="width:100%"></InputNumber>
              </FormItem>
              <FormItem label="类型" prop="type" >
                <Select v-model="form.type" clearable>
                  <Option value="0">请自行编辑下拉菜单</Option>
                </Select>
              </FormItem>
                <FormItem label="是否首页显示" prop="canShow" >
                    <i-switch size="large" v-model="form.canShow" >
                        <span slot="open" >开启</span>
                        <span slot="close" >关闭</span>
                    </i-switch>
                </FormItem>
          <FormItem class="br">
            <Button @click="handleSubmit" :loading="submitLoading" type="primary">提交并保存</Button>
            <Button @click="handleReset">重置</Button>
            <Button type="dashed" @click="close">关闭</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import { addShopSwiper } from "@/api/shop/swiper";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import editor from "@/views/my-components/xboot/editor";
export default {
  name: "add",
  components: {
    uploadPicInput,
    editor,
  },
  data() {
    return {
      submitLoading: false, // 表单提交状态
      form: { // 添加或编辑表单对象初始化数据
        title: "",
        cover: "",
        content: "",
        dsort: 0,
        type: "",
        canShow: true
      },
      // 表单验证规则
      formValidate: {
        title: [{ required: true, message: "不能为空", trigger: "change" }],
        cover: [{ required: true, message: "不能为空", trigger: "change" }],
        content: [{ required: true, message: "不能为空", trigger: "change" }],
        dsort: [{ type: "number", required: true, message: "不能为空", trigger: "change" }],
        type: [{ required: true, message: "不能为空", trigger: "change" }],
      }
    };
  },
  methods: {
    init() {},
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          addShopSwiper(this.form).then(res => {
            this.submitLoading = false;
            if (res.success) {
              this.$Message.success("操作成功");
              this.submited();
            }
          });
        }
      });
    },
    close() {
      this.$emit("close", true);
    },
    submited() {
      this.$emit("submited", true);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
@import "@/styles/single-common.less";
</style>
